<template>
	<view class="">
		<u-sticky :offsetTop="0" :customNavHeight="0" bgColor="#fff">
			<view class="top">
				<image class="bgImg" src="/static/user/userBg.png"></image>
				<view class="info flex flexSbetween">
					<view class="infoLeft flex" v-if="token">
						<image :src="userInfo.avatar"></image>
						<view class="name">
							<view>{{userInfo.nickname}}</view>
							<view class="vip flex flexSbetween">
								<view v-if="userInfo.identity == 0" @click="member(1)">尚未开通会员，无法享受会员权益</view>
								<view v-if="userInfo.identity == 1">个人会员
								</view>
								<view v-if="userInfo.identity == 2">企业会员
								</view>
								<view class="logout" @click="logout()">退出登录 ></view>
							</view>
						</view>
					</view>
					<view class="infoLeft flex" v-if="!token" @click="login">
						<image src="/static/user/user.png"></image>
						<view class="name">
							点击登录
						</view>
					</view>
				</view>
			</view>
			<view class="vipList flex flexSbetween">
				<view class="vipLeft" @click="member(1)">
					<image class="img1" src="/static/user/vip1.png"></image>
					<view class="vipTime">
						<view class="vipDate mt-10">
							{{userInfo.personal_member ? userInfo.personal_member.split('|')[1].slice(0)+'到期' : '尚未开通'}}
						</view>
					</view>
				</view>
				<view class="vipLeft" @click="member(2)">
					<image class="img1" src="/static/user/vip2.png"></image>
					<view class="vipTime">
						<view class="vipDate2 mt-10">
							{{userInfo.enterprise_member ? userInfo.enterprise_member.split('|')[1].slice(0)+'到期' : '尚未开通'}}
						</view>
					</view>
				</view>
			</view>
			<view class="myFile flex">
				<image src="/static/user/file.png"></image>
				<view>我的文件</view>
			</view>
		</u-sticky>
		<view class="flieList">
			<view class="list flex flexSbetween" v-for="item,index in list" :ket="index">
				<view class="left flex" @click="myPdf(item.filefullurl)">
					<image src="/static/user/pdf.png"></image>
					<view class="fileName ml-20">
						<view>{{item.filename}}</view>
						<view class="flex fileBrowse mt-10">
							<view style="width: 150rpx;">{{item.read_num}}次浏览</view>
							<view class="ml-60">
								{{item.validity_date == '' ? '永久有效' : item.is_valid == 1 ? item.validity_date : '已过期'}}
							</view>
						</view>
					</view>
				</view>
				<u-icon name="more-dot-fill" color="#000" size="25" @click="more(index)"></u-icon>
			</view>
		</view>
		<!-- 文件操作弹窗 -->
		<u-popup :show="show" @close="close" round="20">
			<view class="actionSheet">
				<view class="actionSheetList" :class="item.name == '删除' ? 'del':''" v-for="item,index in actionSheet"
					:key="index" @click="chooseSheet(index)">{{item.name}}</view>
			</view>
		</u-popup>
		<!-- 文件替换 -->
		<u-popup :show="showUploadFile" mode="center" customStyle="width:90%" @close="closeUploadFile" round="10">
			<view class="margin-30">
				<view class="flex">
					<view class="chooseFile">
						<image class="chooseFileBgImg"
							:src="finish == false ? '/static/user/chooseFile2.png': '/static/user/chooseFile4.png'">
						</image>
						<view class="chooseFileText" :class="finish == false ? 'whtieColor':'blackColor'">选择替换文件</view>
					</view>
					<view class="chooseFile" style="margin-left: -15rpx;">
						<image class="chooseFileBgImg"
							:src="finish == true ? '/static/user/chooseFile3.png' : '/static/user/chooseFile1.png'">
						</image>
						<view class="chooseFileText" :class="finish == true ? 'whtieColor':'blackColor'">完成</view>
					</view>
				</view>
				<view v-if="!finish">
					<view class="chooseFileTitle">请选择需要替换的文件</view>
					<view class="flex" @click="chooseFile">
						<view class="chooseFileBox">上传文件</view>
						<view class="font28 ml-20">*支持pdf文件</view>
					</view>
					<progress :percent="percent" activeColor="#FF7B6D" backgroundColor="#DDDDDD" show-info
						stroke-width="3" />
				</view>
				<view class="flex flexJusCenter finishHint" v-if="finish">
					<u-icon name="checkmark-circle-fill" color="#FF7B6D" size="22"></u-icon>
					<view class="finish ml-20">文件上传完成</view>
				</view>
			</view>
		</u-popup>
		<!-- 文件上下架 -->
		<u-popup :show="showUnmount" mode="center" customStyle="width:90%" @close="closeUnmount" round="10">
			<view class="margin-30">
				<view class="flex font28">
					<switch :checked="unmountStatus" color="#ff7b60" style="transform:scale(0.7)"
						@change="changeSwitch" />
					<view>上下架</view>
				</view>
				<view class="unmountText mt-20">
					<textarea placeholder="输入上下架内容" v-model="unmountContent"></textarea>
				</view>
				<view class="btn flex flexEnd mt-40">
					<view class="cancel font28" @click="closeUnmount">取消</view>
					<view class="confim font28" @click="confirm">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 复制文件链接 -->
		<u-popup :show="showCopy" mode="center" customStyle="width:90%" @close="closeCopy" round="10">
			<view class="margin-40 textCenter">
				<view class="flexJusCenter flex">
					<canvas class="fileShareImg" canvas-id="qrcode" v-show="uqrShow" @click="prview" />
				</view>
				<!-- <image class="fileShareImg" src="/static/index/box6.png" @click="priviewImg()"></image> -->
				<view class="shareText mt-20">将二维码分享给好友 对方扫一扫即可阅览</view>
			</view>
		</u-popup>
		<view class="noData" v-if="list.length == 0">
			<image :src="getNoData()"></image>
			<view class="notText">暂无文件</view>
		</view>
	</view>
</template>

<script>
	import baseUrl from '@/config/url.js'
	import uqrCode from "@/common/uqrcode.js"
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	export default {
		data() {
			return {
				token: '',
				list: [{
					status: 0
				}],
				show: false, //展示文件操作菜单
				actionSheet: [{
						name: '浏览轨迹'
					},
					{
						name: '设置'
					},
					{
						name: '复制链接'
					},
					{
						name: '替换'
					},
					{
						name: '上下架'
					},
					{
						name: '删除'
					},
					{
						name: '取消'
					},
				],
				showUploadFile: false, //展示文件替换
				finish: false,
				userInfo: '',
				percent: 0, //上传文件进度
				showUnmount: false, //文件上下架弹窗
				unmountContent: '您的文件已下架，如有疑问请联系创作者', //文件上下架内容
				unmountStatus: false, //文件上下架状态
				showCopy: false, //文件复制链接弹框二维码
				page: 1,
				pageNum: '',
				fileIndex: 0, //所选文件索引
				uqrShow: false,
				replaceFile: '', //新的替换文件地址
				fileImg: '' ,//文件二维码图片
				checkInfo:''
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			})
			this.getUserInfo()
			this.token = uni.getStorageSync('token')
			this.list = []
			this.page = 1
			this.pageNum = ''
			this.getFileList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
				uni.hideLoading()
			}, 1500);
		},
		onShow() {
			this.getUserInfo()
			this.token = uni.getStorageSync('token')
			this.list = []
			this.page = 1
			this.pageNum = ''
			this.getFileList()
			this.getcheck()
		},
		methods: {
			getcheck(){
				let data={
					equityId:'10007'
				}
				this.api.get('api/equity/check',data).then(res=>{
					if(res.code == 200){
						this.checkInfo = res.data
					}
				})
			},
			myPdf(url) {
				uni.navigateTo({
					url: '/pages/user/myPdf?url=' + url
				})
			},
			getFileList() {
				let data = {
					type: 1,
					page: this.page,
					pageSize: 10
				}
				this.api.get('api/file/list', data).then(res => {
					if (res.code == 200) {
						this.pageNum = res.data.last_page
						this.list = this.list.concat(res.data.data)
					}
				})
			},
			member(e) {
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/user/member?type=' + e
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗',
					success: (res) => {
						if (res.confirm) {
							this.logoutApi()
						}
					}
				})
			},
			logoutApi() {
				let data = {}
				this.api.post('api/user/logout', data).then(res => {
					if (res.code == 200) {
						uni.clearStorageSync()
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}
				})
			},
			getUserInfo() {
				let data = {}
				this.api.get('api/user/information', data).then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 打开操作菜单
			more(index) {
				this.show = true
				this.fileIndex = index
			},
			// 关闭操作菜单
			close() {
				this.show = false
			},
			// 选择操作菜单
			chooseSheet(index) {
				if (index == 6) { //取消
					this.show = false
				}
				if (index == 0) { //浏览轨迹
					uni.navigateTo({
						url: '/pages/user/browsingHistory?id=' + this.list[this.fileIndex].id
					})
					this.show = false
				}
				if (index == 1) { //设置
					uni.navigateTo({
						url: '/pages/user/setFile?id=' + this.list[this.fileIndex].id
					})
					this.show = false
				}
				if (index == 2) { //复制链接
					uni.setClipboardData({
						data:this.list[this.fileIndex].filename + '一'+this.FileUrl + this.list[this.fileIndex].serial_no,
						success: (res) => {
							this.show = false
							setTimeout(()=>{
								this.showCopy = true
								this.getCode()
							},1500)
						}
					});
				}
				if (index == 3) { //替换
					this.showUploadFile = true
					this.show = !this.show
				}
				if (index == 4) { //上下架
					this.unmountStatus = this.list[this.fileIndex].status == 1 ? true : false
					this.unmountContent = this.list[this.fileIndex].status_message == null ? '您的文件已下架，如有疑问请联系创作者' : this
						.list[this.fileIndex].status_message
					this.showUnmount = true
					this.show = !this.show
				}
				if (index == 5) { //删除
					this.show = false
					uni.showModal({
						title: '提示',
						content: '确定要删除吗',
						success: (res) => {
							if (res.confirm) {
								this.delFile()
							}
						}
					})
				}
			},
			getCode() {
				this.uqrShow = true
				uqrCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: this.FileUrl + this.list[this.fileIndex].serial_no,
					size: 120.5,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrCode.errorCorrectLevel.H,
					success: res => {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: 120,
							height: 120,
							destWidth: 140,
							destHeight: 140,
							canvasId: 'qrcode',
							success: (data) => {
								// 在H5平台下，tempFilePath 为 base64
								console.log(data, 123)
								this.toImgBase64(data.tempFilePath)
							},
							fail: err => {
								console.log(err, 345)
							}
						})
					}
				})
			},
			// 文件二维码图片base64转为图片地址
			toImgBase64(data) {
				base64ToPath(data)
					.then(path => {
						console.log(path)
						this.fileImg = path
					})
					.catch(error => {
						console.error(error)
					})
			},
			// 预览文件二维码图片
			prview() {
				this.showCopy = false
				uni.previewImage({
					current: this.fileImg,
					urls: this.fileImg.split(','),
					success: res => {
						console.log(res)
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			delFile() {
				let id = this.list[this.fileIndex].id
				let data = {
					ids: id
				}
				this.api.post('api/file/remove', data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.list.splice(this.fileIndex, 1)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 关闭文件替换
			closeUploadFile() {
				this.showUploadFile = false
				this.percent = 0
			},
			// 选择文件
			chooseFile() {
				uni.chooseFile({
					count:1,
					extension: ['.pdf'],
					success: (res) => {
						console.log(res);
						let fileSize = res.tempFiles[0].size / 1024 / 1024
						if(this.userInfo.identity == 0){
							if(fileSize > 1){
								uni.showToast({
									title:'文件大小不能超过'+this.checkInfo.limit+'M',
									icon:'none'
								})
								return
							}
						}
						uni.showLoading({
							title: '正在上传'
						})
						var uploadTask = uni.uploadFile({
							url: baseUrl + 'api/common/upload', //仅为示例，并非真实接口地址。
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							formData: {
								'category': 'pdf',
							},
							complete: (suc) => {
								console.log(JSON.parse(suc.data))
								uni.hideLoading()
								let data = JSON.parse(suc.data)
								this.replaceFile = data.data
								uni.showToast({
									title: data.msg,
									icon: 'none'
								})
								if (this.userInfo.identity == 0) {
									var time = setInterval(() => {
										this.percent++
										if (this.percent == 100) {
											clearInterval(time)
											this.finish = true
											this.fileReplace(res.tempFiles[0].name)
										}
									}, 200)
								} else {
									var time = setInterval(() => {
										this.percent++
										if (this.percent == 100) {
											clearInterval(time)
											this.finish = true
											this.fileReplace(res.tempFiles[0].name)
										}
									}, 10)
								}
							}
						});
						// uploadTask.onProgressUpdate((res) => {
						// 	uni.hideLoading()
						// 	console.log('上传进度' + res.progress);
						// 	this.percent = res.progress

						// });
					},
				})
			},
			// 文件替换上传
			fileReplace(name) {
				let data = {
					id: this.list[this.fileIndex].id,
					fileurl: this.replaceFile.url,
					filefullurl: this.replaceFile.fullurl
				}
				this.api.post('api/file/replace', data).then(res => {
					if (res.code == 200) {
						this.showUploadFile = false
						this.list[this.fileIndex].filename = name
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 关闭文件上下架
			closeUnmount() {
				this.showUnmount = false
			},
			// 文件上下架确定
			confirm() {
				console.log(this.unmountStatus)
				let data = {
					ids: this.list[this.fileIndex].id,
					status: this.unmountStatus == false ? 0 : 1,
					message: this.unmountContent
				}
				this.api.post('api/file/status', data).then(res => {
					if (res.code == 200) {
						this.showUnmount = false
						this.unmountContent = ''
					}
				})

			},
			// 切换文件上下架状态
			changeSwitch(e) {
				this.unmountStatus = e.detail.value
			},
			// 关闭文件复制链接弹窗
			closeCopy() {
				this.showCopy = false
			},
		},
		onReachBottom() {
			if (this.page < this.pageNum) {
				uni.showLoading({
					title: '加载中'
				})
				setTimeout(() => {
					uni.hideLoading({})
					this.page = this.page + 1
					this.getFileList() //页面上拉调用这个方法
				}, 1000)
			} else {
				uni.showToast({
					title: '我已经到底了',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.bgImg {
		width: 100%;
		height: 287rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.info {
		position: absolute;
		left: 0;
		right: 0;
		top: 116rpx;
		margin: 0 30rpx;
		z-index: 99;
	}

	.infoLeft {
		flex: 1;
	}

	.infoLeft image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.name {
		font-size: 45rpx;
		font-weight: 700;
		color: #000;
		flex: 1;
	}

	.vip {
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.vipList {
		margin: 30rpx 20rpx;
	}

	.vipLeft {
		position: relative;
		left: 0;
		right: 0;
	}

	.img1 {
		width: 353rpx;
		height: 161rpx;
		position: relative;
		left: 0;
		right: 0;
	}

	.vipTime {
		position: absolute;
		left: 0;
		right: 0;
		top: 60rpx;
		padding: 30rpx;
	}

	.vipDate {
		font-size: 24rpx;
		color: #854932;
		font-weight: 500;
	}

	.vipDate2 {
		color: #fff;
		font-size: 24rpx;
		font-weight: 500;
	}

	.myFile {
		border-bottom: 1rpx solid #000;
		padding-bottom: 10rpx;
		margin: 40rpx 30rpx 30rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.myFile image {
		width: 58rpx;
		height: 43rpx;
		margin-right: 20rpx;
	}

	.flieList {
		margin: 30rpx;
	}

	.list {
		border-bottom: 1rpx solid #C5C5C5;
		padding: 30rpx 0;
	}

	.left image {
		width: 53rpx;
		height: 60rpx;
	}

	.fileName {
		font-size: 28rpx;
		color: #000;
	}

	.fileBrowse {
		font-size: 24rpx;
		color: #9D9D9D;
	}

	.actionSheet {}

	.actionSheetList {
		border-bottom: 1rpx solid #ececec;
		padding: 30rpx 0;
		text-align: center;
		margin: 0 30rpx;
		font-size: 30rpx;
		color: #000;
	}

	.del {
		color: red;
	}

	.chooseFile {
		position: relative;
	}

	.chooseFileBgImg {
		width: 305rpx;
		height: 56rpx;
	}

	.chooseFileText {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		text-align: center;
		line-height: 56rpx;
		font-size: 28rpx;
	}

	.chooseFileTitle {
		margin: 40rpx 0 40rpx 0rpx;
		font-size: 28rpx;
	}

	.chooseFileBox {
		border: 1rpx solid #FF7B6D;
		border-radius: 5rpx;
		color: #FF7B6D;
		font-size: 26rpx;
		padding: 10rpx 30rpx;
	}

	.finish {
		font-size: 28rpx;
	}

	.finishHint {
		margin: 100rpx 0;
	}

	.unmountText {
		border: 1rpx solid #616161;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.confim {
		background: #ED0000;
		color: #fff;
		border-radius: 5rpx;
		padding: 10rpx 40rpx;
		margin-left: 20rpx;
	}

	.cancel {
		border: 1rpx solid #616161;
		color: #616161;
		border-radius: 5rpx;
		padding: 10rpx 40rpx;
	}

	.fileShareImg {
		width: 240rpx;
		height: 240rpx;
	}

	.shareText {
		text-align: center;
		font-size: 28rpx;
		margin: 30rpx 170rpx 0rpx 170rpx;
	}
</style>